<template>
  <view class="container">
    <CustomHeader @height-change="onHeaderHeightChange" />
    
    <!-- 主要内容 -->
    <view class="main-content" :style="{ paddingTop: headerHeight + 'px' }">
      <!-- 产品展示区域 -->
      <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/mall/banner.png" mode="widthFix" class="banner-img" />
      
      <!-- 产品甄选 -->
      <view class="product-selection">
        <view class="section-title">产品甄选</view>
        <view class="product-grid">
          <view 
            v-for="(product, index) in products" 
            :key="index"
            class="product-card"
            @click="goToDetail(product)"
          >
            <view class="product-image">
              <image :src="product.listImg" mode="aspectFit"></image>
            </view>
            <view class="product-info">
              <view class="product-name">{{ product.name }}</view>
              <view class="stock-info" >
                <view :class="product.stockClass">{{ product.stock }}</view>
                <text class="stock-count">{{ product.stockCount }}</text>
              </view>
              <view class="price-info">
                <view class="price-text">
                  <text class="current-price">¥{{ product.price }}</text>
                  <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
                </view>
                <uni-badge class="uni-badge-left-margin" :text="product.number" absolute="rightTop" type="warning" :max-num="9" size="small">
                  <view class="add-button" @click.stop="addToCart(product)">+</view>
                </uni-badge>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <CustomTabBar :activeIndex="0" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import CustomHeader from '@/components/CustomHeader.vue'
import { productApi } from '@/request/api.js'
import cartManager from '../../utils/cart';

export default {
  components: { CustomTabBar, CustomHeader },
  data() {
    return {
      headerHeight: 0,
      products: []
    }
  },
  onLoad(options) {
    this.getProductList()
  },
  onShow() {
    this.initCartNumber()
  },
  methods: {
    initCartNumber() {
      const charts = cartManager.loadLocalCart()?.items
      this.products = this.products.map(x => {
        x.number = charts.find(c => c.id === x.id)?.quantity
        return  x
      })
    },
    getProductList() {
      productApi.getProductList().then(res => {
        const productList = res.map(x => {
          return {
            ...x,
            stockClass: x.stock === 0 ? 'out-of-stock' : x.stock <= 50 ? 'low-stock' : 'in-stock',
            stock: x.stock === 0 ? '无货' : x.stock <= 50 ? '库存紧张' : '库存',
            stockCount: x.stock === 0 ? `0/${x.unit}` : `${x.stock}/${x.unit}`,
          }
        })
        this.products = [...productList]
        this.initCartNumber()
      })
    },
    onHeaderHeightChange(height) {
      this.headerHeight = height;
    },
    async addToCart(product) {
      if (product.stockClass === 'out-of-stock') {
        uni.showToast({
          title: '商品已售罄',
          icon: 'none'
        });
        return;
      }

      await cartManager.addItem({
        id: product.id,
        name: product.name
      })

      this.initCartNumber()
      uni.showToast({
        title: '已添加到购物车',
        icon: 'success'
      });
      
    },
    goToDetail(product) {
      uni.navigateTo({
        url: `/pages/mall/detail?id=${product.id}`
      });
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.main-content {
  padding-bottom: 200rpx;
}
.banner-img {
  width: 100%;
}

.product-selection {
  padding: 40rpx 30rpx;
  
  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 40rpx;
  }
  
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30rpx 20rpx;
  }
  
  .product-card {
    width: calc(50% - 10rpx);
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    // border-radius: 20rpx;
    padding: 0;
    // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    position: relative;
    box-sizing: border-box;
    
    .product-image {
      width: 100%;
      height: 346rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10rpx;
      }
    }
    
    .product-info {
      flex: 1;
      padding: 20rpx;
      
      .product-name {
        font-size: 24rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 8rpx;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .stock-info {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 22rpx;
        margin-bottom: 12rpx;
        
        .stock-count {
          font-size: 20rpx;
          color: #999999;
        }
        
        .in-stock {
          display: inline-block;
          color: #FFFFFF;
          background-color: #715091;
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-size: 20rpx;
        }
        
        .low-stock {
          display: inline-block;
          color: #FFFFFF;
          background: linear-gradient(to right, #715091 0%, #715091 50%, #F59E0B 50%, #F59E0B 100%);
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-size: 20rpx;
        }
        
        .out-of-stock {
          display: inline-block;
          color: #FFFFFF;
          background-color: #F59E0B;
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-size: 20rpx;
        }
      }
      
      .price-info {
        display: flex;
        align-items: center;
        gap: 8rpx;
        margin-bottom: 15rpx;
        justify-content: space-between;
        .price-text {
          display: inline-block;
          width: fit-content;
        }
        
        .current-price {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
        }
        
        .original-price {
          font-size: 22rpx;
          margin-left: 10rpx;
          color: #999999;
          text-decoration: line-through;
        }
      }
    }
    
    .add-button {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background-color: #FFF7ED;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #F9B866;
      font-size: 40rpx;
    }
  }
}
</style> 